<template>
  <div class="homeSwiper">
    <van-search v-model="search" placeholder="请输入搜索关键词" shape="round"/>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item v-for="item in bannerData" :key="item.id">
    <img :src="item.picUrl" alt="">
    </van-swipe-item>

</van-swipe>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'HomeSwiper',
  data(){
    return{
      search:"",
      bannerData:[]
    }
  },
  created(){
    this.getBanner()
  },
  methods:{
    getBanner(){
      axios.get("/api/recommend/banner")
      .then(res =>{
        console.log(res.data)
        this.bannerData = res.data.data
      })
      .catch(function(error){
        console.log(error)
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
 .my-swipe .van-swipe-item img{
   width: 90%;
   border-radius: 1rem;
  }
</style>
